<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>聊天窗口</title>
	<link rel="stylesheet" type="text/css" href="./iconfont.css">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		body{
			background-color: gray;
		}
		.main{
			margin: 0 auto;
			margin-top: 100px;
			width: 750px;
			height: 500px;
			background-color: gray;
		}
		.left{
			width: 190px;
			height: 490px;
			padding: 5px;
			background-color: #D7D7D7;
			float: left;
		}
		.contact{
			height: 40px;
			padding: 5px;
			border-radius: 2px;
			cursor: pointer;

		}
		.left .contact img{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			float: left;
			margin-right: 10px;
		}
		.left .contact span{
			line-height: 40px;
		}
		.right{
			width: 550px;
			height: 500px;
			position: relative;
			float: right;
			background-color: #EAE9E9;
		}
		.right .msg_box{
			position: absolute;
			top: 0px;
			display: none;
		}
		.right .top{
			width: 530px;
			height: 50px;
			padding: 10px;
			background-color: #F5F5F5;
		}
		.right .top .face{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			float: left;
			margin-right: 10px;
		}
		.right .top span{
			line-height: 50px;
		}
		.content{
			width: 550px;
			height: 300px;
			overflow: auto;
			background-color: #fff;
		}
		.content li{
			width: 530px;
			float: right;
			padding: 10px;
			background-color: white;
			text-align: right;
		}
		.content li .cright{
			float: right;

		}
		.content li .cright img{
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
		.content .cleft{
			float: right;
		}
		.content .cleft .time{
			text-align: right;
			font-size: 12px;
			color: #9f9fa0;

		}
		.content .cleft span{
			margin: 0 10px;
		}
		.content .cleft .msg{
			background-color: #60B778;
			margin: 10px;
			padding: 10px;
			color: white;
			font-size: 14px;
			border-radius: 5px;
			display: inline-block;
			text-align: left;
			max-width: 450px;
		}
		.right .tool{
			width: 550px;
			height: 30px;
			background-color: #F5F5F5;
		}
		.msg_input{
			width: 550px;
			height: 100px;
			background-color: white;
		}
		.msg_input textarea{
			width: 510px;
			height: 50px;
			border: 0px;
			outline: 0px;
			padding: 10px 20px;
			font-size: 14px;
			resize: none;

		}
		.msg_input p{
			
		}
		.msg_input span{
			float: right;
			background-color: green;
			margin-right: 20px;
			background-color: #60B778;
			border-radius: 3px;
			color: white;
			padding: 3px 10px;
			font-size: 14px;
			cursor: pointer;
		}
		.tool i{
			margin-left: 10px;
			font-size: 20px;
			line-height: 30px;
		}
	</style>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
	<script type="text/javascript" src="./main.js"></script>
	   <script type="text/javascript">
	// 	window.onload=function(){
	// 		contact = document.getElementsByClassName("contact");
	// 		msg_box = document.getElementsByClassName("msg_box");
	// 		send = document.getElementsByClassName('send');
	// 		data = document.getElementsByClassName('data');
	// 		content = document.getElementsByClassName('content');
	// 		close = document.getElementsByClassName('close');
	// 		for(var i=0;i<contact.length;i++){
	// 			contactOnClick(i);
	// 			sendOnClick(i);	
	// 			closeOnClick(i);		
	// 		}
	// 		function contactOnClick(i){
	// 			contact[i].onclick =  function(){
	// 				for(var j=0;j<contact.length;j++){
	// 					contact[j].style.backgroundColor="";
	// 					msg_box[j].style.display="none";
	// 				};
	// 				this.style.backgroundColor="white";
	// 				msg_box[i].style.display="block";
	// 			}
	// 		}
	// 		function sendOnClick(i){
	// 			send[i].onclick=function(){
	// 				now = new Date();
	// 				li = document.createElement('li');
	// 				li.innerHTML='<div class="cright"><img src="./img/3.png" alt=""></div><div class="cleft"><p class="time">'+now.toLocaleString()+'<span>周星驰</span></p><p class="msg">'+data[i].value+'</p></div>';
	// 				content[i].appendChild(li);
	// 				var Height = content[i].scrollHeight;
	// 				content[i].scrollTop=Height;
	// 			}
	// 		}
	// 		function closeOnClick(i){
	// 			close[i].onclick=function(){
	// 				for(var j=0;j<msg_box.length;j++){
	// 					msg_box[j].style.display="none";
	// 					contact[j].style.backgroundColor="";
	// 				}
	// 			}
	// 		}

	// 	}
	// </script>
</head>
<body>
	<div class="main">
		<div class="left">
			<ul>
				<li class="contact"><img src="./img/1.png" alt=""><span>林心如 </span></li>
				<li class="contact"><img src="./img/2.png" alt=""><span>朱茵 </span></li>
				<li class="contact"><img src="./img/3.png" alt=""><span>周星星 </span></li>
			</ul>
		</div>
		<div class="right">
			<div class="msg_box">
				<div class="top">
					<img class="face" src="./img/1.png" alt=""><span>林心如 </span>
				</div>
				<ul class="content">
					<li>
						<div class="cright"><img src="./img/3.png" alt=""></div>
						<div class="cleft">
							<p class="time">2017/02/28 上午10:56:30<span>周星驰</span></p>
							<p class="msg">Long time no see !</p>
						</div>
					</li>
					<li>
						<div class="cright"><img src="./img/3.png" alt=""></div>
						<div class="cleft">
							<p class="time">2017/02/28 上午10:56:30<span>周星驰</span></p>
							<p class="msg">我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇我是紫薇</p>
						</div>
					</li>
				</ul>
				<div class="tool"><i class="iconfont icon-biaoqing-copy"></i><i class="iconfont icon-tupian"></i></div>
				<div class="msg_input">
					<textarea name="" id="" cols="30" rows="10" class="data"></textarea>
					<p>
						<span class="send">发送</span>
						<span class="close">关闭</span>
					</p>
				</div>
			</div>

			<div class="msg_box">
				<div class="top">
					<img class="face" src="./img/2.png" alt=""><span>朱茵</span>
				</div>
				<ul class="content">
					<li>
						<div class="cright"><img src="./img/3.png" alt=""></div>
						<div class="cleft">
							<p class="time">2017/02/28 上午10:56:30<span>周星驰</span></p>
							<p class="msg">Long time no see !</p>
						</div>
					</li>
					<li>
						<div class="cright"><img src="./img/3.png" alt=""></div>
						<div class="cleft">
							<p class="time">2017/02/28 上午10:56:30<span>周星驰</span></p>
							<p class="msg">Rihgt now !</p>
						</div>
					</li>
				</ul>
				<div class="tool"><i class="iconfont icon-biaoqing-copy"></i><i class="iconfont icon-tupian"></i></div>
				<div class="msg_input">
					<textarea name="" id="" cols="30" rows="10" class="data"></textarea>
					<p>
						<span class="send">发送</span>
						<span class="close">关闭</span>
					</p>
				</div>
			</div>

			<div class="msg_box">
				<div class="top">
					<img class="face" src="./img/3.png" alt=""><span>周星星 </span>
				</div>
				<ul class="content">
					<li>
						<div class="cright"><img src="./img/3.png" alt=""></div>
						<div class="cleft">
							<p class="time">2017/02/28 上午10:56:30<span>周星驰</span></p>
							<p class="msg">Long time no see !</p>
						</div>
					</li>
				</ul>
				<div class="tool"><i class="iconfont icon-biaoqing-copy"></i><i class="iconfont icon-tupian"></i></div>
				<div class="msg_input">
					<textarea name="" id="" cols="30" rows="10" class="data"></textarea>
					<p>
						<span class="send">发送</span>
						<span class="close">关闭</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>